<template>
    <div>
        <Loading v-if="loadingShow" />
        <div class="container" v-for="item in list" :key="item.id">
            <van-image width="100%" height="100%" lazy-load :src="item.scene_pic_url">
                <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                </template>
            </van-image>
            <div class="container_title">
                <p>{{ item.title }}</p>
                <p>{{ item.subtitle }}</p>
            </div>
        </div>
        <!-- 底部页面导航 -->
        <div class="pagination">
            <van-pagination
                v-model="page"
                :total-items="totalData.count"
                :show-page-size="3"
                force-ellipses
                :page-count="totalData.totalPages"
                @change="change"
            />
        </div>
        <!-- 撑大盒子 -->
        <div class="test"></div>
    </div>
</template>

<script>
import Loading from '../component/Loading.vue'
export default {
    name: 'Topic',
    data() {
        return {
            page: 1,
            size: 5,
            list: [],
            totalData: '',
            loadingShow: true
        }
    },
    components: {
        Loading
    },
    methods: {
        // 页码改变的时候
        change(v) {
            this.page = v
            this.httpData()
            document.body.scrollTop = document.documentElement.scrollTop = 0
        },
        // 请求页面数据
        httpData() {
            this.$http
                .get('/topic/list', {
                    params: {
                        page: this.page,
                        size: this.size
                    }
                })
                .then(res => {
                    if (res.data.errno != 0) {
                        this.$dialog.alert({
                            message: res.data.errmsg
                        })
                        return
                    }
                    const { data } = res.data
                    this.totalData = data
                    this.list = data.data
                    console.log(data)
                    console.log(data.data)
                    this.loadingShow = false
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    created() {
        this.httpData()
    }
}
</script>

<style scoped>
.pagination {
    height: 40px;
    width: 100%;
}
.container {
    background-color: #fff;
    margin: 20px 0;
}
.container_title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 118px;
    font-size: 18px;
    text-align: center;
    color: #333;
}
.test {
    width: 100%;
    height: 60px;
}
</style>